<template>
  <div class="file-list-container">
    <!-- 网格视图 -->
    <div v-if="viewMode === 'grid'" class="file-grid">
      <div v-for="item in files" :key="item.id" class="file-item" @click="handleFileClick(item)">
        <div class="file-icon">
          <svg v-if="item.type === 'folder'" width="48" height="48" viewBox="0 0 24 24" fill="#0074D9">
            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
          </svg>
          <svg v-else-if="item.type === 'doc'" width="48" height="48" viewBox="0 0 24 24" fill="#11A8FF">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
          <svg v-else-if="item.type === 'image'" width="48" height="48" viewBox="0 0 24 24" fill="#FF6B6B">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <circle cx="8.5" cy="8.5" r="1.5"></circle>
            <polyline points="21 15 16 10 5 21"></polyline>
          </svg>
          <svg v-else-if="item.type === 'video'" width="48" height="48" viewBox="0 0 24 24" fill="#FFA94D">
            <polygon points="5 3 19 12 5 21 5 3"></polygon>
          </svg>
          <svg v-else-if="item.type === 'audio'" width="48" height="48" viewBox="0 0 24 24" fill="#845EC2">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
          </svg>
          <svg v-else width="48" height="48" viewBox="0 0 24 24" fill="#4ECDC4">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
            <line x1="8" y1="21" x2="16" y2="21"></line>
            <line x1="12" y1="17" x2="12" y2="21"></line>
          </svg>
        </div>
        <div class="file-info">
          <div class="file-name" :title="item.name">{{ item.name }}</div>
          <div class="file-meta">
            <span>{{ formatSize(item.size) }}</span>
            <span>{{ formatDate(item.modified) }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 列表视图 -->
    <div v-else class="file-list">
      <div class="list-header">
        <div class="header-item name">名称</div>
        <div class="header-item size">大小</div>
        <div class="header-item modified">修改日期</div>
        <div class="header-item operations">操作</div>
      </div>
      <div class="list-body">
        <div v-for="item in files" :key="item.id" class="list-row">
          <div class="row-item name">
            <div class="file-icon-small">
              <svg v-if="item.type === 'folder'" width="20" height="20" viewBox="0 0 24 24" fill="#0074D9">
                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
              </svg>
              <svg v-else-if="item.type === 'doc'" width="20" height="20" viewBox="0 0 24 24" fill="#11A8FF">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
              <svg v-else-if="item.type === 'image'" width="20" height="20" viewBox="0 0 24 24" fill="#FF6B6B">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21 15 16 10 5 21"></polyline>
              </svg>
              <svg v-else-if="item.type === 'video'" width="20" height="20" viewBox="0 0 24 24" fill="#FFA94D">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
              <svg v-else-if="item.type === 'audio'" width="20" height="20" viewBox="0 0 24 24" fill="#845EC2">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
              </svg>
              <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="#4ECDC4">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                <line x1="8" y1="21" x2="16" y2="21"></line>
                <line x1="12" y1="17" x2="12" y2="21"></line>
              </svg>
            </div>
            <span :title="item.name">{{ item.name }}</span>
          </div>
          <div class="row-item size">{{ formatSize(item.size) }}</div>
          <div class="row-item modified">{{ formatDate(item.modified) }}</div>
          <div class="row-item operations">
            <button class="operation-btn" @click="handleDownloadClick($event, item)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
            </button>
            <button class="operation-btn" @click="handleShareClick($event, item)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
              </svg>
            </button>
            <button class="operation-btn" @click="handleMoreClick($event, item)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3 6 5 6 21 6"></polyline>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                <line x1="10" y1="11" x2="10" y2="17"></line>
                <line x1="14" y1="11" x2="14" y2="17"></line>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// Props
const props = defineProps({
  viewMode: {
    type: String,
    required: true
  }
})

// Mock data for files
const files = ref([
  {
    id: '1',
    name: '项目文档',
    type: 'folder',
    size: 0,
    modified: '2023-11-15T10:30:00'
  },
  {
    id: '2',
    name: '产品需求说明书.docx',
    type: 'doc',
    size: 2500000,
    modified: '2023-11-14T14:20:00'
  },
  {
    id: '3',
    name: 'UI设计稿.png',
    type: 'image',
    size: 5800000,
    modified: '2023-11-13T09:15:00'
  },
  {
    id: '4',
    name: '开发计划.xlsx',
    type: 'doc',
    size: 1200000,
    modified: '2023-11-12T16:45:00'
  },
  {
    id: '5',
    name: '产品演示视频.mp4',
    type: 'video',
    size: 258000000,
    modified: '2023-11-11T11:30:00'
  },
  {
    id: '6',
    name: '音频素材.mp3',
    type: 'audio',
    size: 8500000,
    modified: '2023-11-10T15:20:00'
  },
  {
    id: '7',
    name: '项目源代码.zip',
    type: 'zip',
    size: 158000000,
    modified: '2023-11-09T10:10:00'
  },
  {
    id: '8',
    name: '客户反馈',
    type: 'folder',
    size: 0,
    modified: '2023-11-08T14:50:00'
  }
])

// Format file size
function formatSize(bytes) {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// Format date
function formatDate(dateString) {
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// Handle file click
function handleFileClick(file) {
  console.log(`点击了文件/文件夹: ${file.name}`)
  // 这里可以添加实际的业务逻辑，例如打开文件或文件夹
}

// Handle download button click
function handleDownloadClick(event, file) {
  event.stopPropagation() // 阻止事件冒泡
  console.log(`下载文件: ${file.name}`)
  // 这里可以添加实际的下载逻辑
}

// Handle share button click
function handleShareClick(event, file) {
  event.stopPropagation() // 阻止事件冒泡
  console.log(`分享文件: ${file.name}`)
  // 这里可以添加实际的分享逻辑
}

// Handle more operations button click
function handleMoreClick(event, file) {
  event.stopPropagation() // 阻止事件冒泡
  console.log(`更多操作: ${file.name}`)
  // 这里可以添加实际的更多操作逻辑
}
</script>

<style scoped>
.file-list-container {
  flex: 1;
  overflow-y: auto;
}

/* Grid View Styles */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 10px 0;
}

.file-item {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.file-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.file-icon {
  margin-bottom: 12px;
}

.file-info {
  width: 100%;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* List View Styles */
.file-list {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.list-header {
  display: flex;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  font-size: 14px;
  color: #666;
}

.header-item {
  padding: 12px 16px;
}

.header-item.name {
  flex: 2;
}

.header-item.size {
  width: 120px;
}

.header-item.modified {
  width: 180px;
}

.header-item.operations {
  width: 100px;
}

.list-body {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.list-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.list-row:hover {
  background-color: #fafafa;
}

.row-item {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
}

.row-item.name {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon-small {
  flex-shrink: 0;
}

.row-item.size {
  width: 120px;
  color: #666;
}

.row-item.modified {
  width: 180px;
  color: #666;
}

.row-item.operations {
  width: 100px;
  display: flex;
  gap: 8px;
}

.operation-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.operation-btn:hover {
  background-color: #f0f0f0;
  color: #0074D9;
}
</style>